<template>
  <div style="height: 100%;background-color: #232733;  border-radius: 10px;" ref="chart"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { trend } from '@/utils/api'


let chart = ref(null);
var myChart: any = null
let option: any = {
  //颜色
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],

  tooltip: {//配置提示框
    trigger: 'axis',
    axisPointer: {//坐标轴指示器样式
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {//图例配置
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
    textStyle: {
      color: 'white' // 设置图例文字颜色为白色，以便在深色背景上显示
    }

  },

  toolbox: { //工具箱
    feature: {
      saveAsImage: {}//保存图片功能
    }
  },
  grid: {// 网格（grid）配置，定义了图表的边距和是否包含坐标轴的标签。
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis:
  {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
  ,
  yAxis: [// y轴（yAxis）配置，设置为数值轴。
    {
      type: 'value'
    }
  ],
  series: [// 数据系列（series）配置，定义了图表的数据系列。

    {//这里配置了一个名为'Line 1'的
      name: 'Line 1',
      type: 'line',//折线图，
      stack: 'Total',//设置了堆叠为'Total'，
      smooth: true,// 线条平滑，
      lineStyle: {
        width: 0//线条宽度为0（无线条显示），
      },
      showSymbol: false,// 不显示数据点符号，
      areaStyle: {
        opacity: 0.8,// 透明度为0.8，
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [//区域填充样式为渐变色，
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'// 强调状态下聚焦于系列本身，
      },
      data: [140, 232, 101, 264, 90, 340, 250]//具体的数据点。
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: 'Line 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: 'Line 4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: 'Line 5',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
}
let colors = [
  {
    s: "rgb(41,143,75,1)",
    e: "rgb(41,143,75,0)"
  },
  {
    s: "rgb(60,103,208,1)",
    e: "rgb(60,103,208,0)"
  },
  {
    s: "rgb(68,222,189,1)",
    e: "rgb(68,222,189,0)"
  },
  {
    s: "rgb(223,44,61,1)",
    e: "rgb(223,44,61,0)"
  },
  {
    s: "rgb(223,108,30,1)",
    e: "rgb(223,108,30,0)"
  },
]
const gettrend = () => {
  trend<any>().then(res => {
    console.log(res)
    option.xAxis.data = res.common.month
    option.series = []
    res.map.data.forEach((item: any, index: any) => {
      option.series.push({
        name: item.name,
        type: 'line',//折线图，
        stack: 'Total',//设置了堆叠为'Total'，
        smooth: true,// 线条平滑，
        lineStyle: {
          width: 0//线条宽度为0（无线条显示），
        },
        showSymbol: false,// 不显示数据点符号，
        areaStyle: {
          opacity: 0.8,// 透明度为0.8，
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colors[index].s },
            { offset: 1, color: colors[index].e }
          ])
        },
        emphasis: {
          focus: 'series'// 强调状态下聚焦于系列本身，
        },
        data: item.data//具体的数据点。
      })
    });
    option.legend.data = res.map.data.map((item: any) => item.name);
    myChart.setOption(option);
  })
}
onMounted(() => {
  myChart = echarts.init(chart.value);
  myChart.setOption(option);
  gettrend()
});
</script>
